/* 这个css 专门针对博客列表来设置专门的样式 */

.blog {
    width: 100%;
    padding: 20px;
}

/* 博客的标题 */
.title {
    font-size: 20px;
    font-weight: 700;
    padding: 10px;
    text-align: center;
}
/* 博客的日期 */
.time {
    font-size: 15px;
    color: green;
    text-align: center;
    padding: 10px;
}

/* 博客的描述 */
.des {
    text-indent: 2em;
}

/* 查看博客详情的按钮 */
.blog .detail {
    /* a标签是行列元素要转换为行内元素才好设置 */
    display: block;
    width: 120px;
    height: 40px;
    /* 设置边框 */
    border: 2px solid black;

    /* 让文字水平居中 */
    text-align: center;
    /* 文字垂直居中 */
    line-height: 40px;
    /* 删除下划线 */
    text-decoration: none;
    /* 修改文字颜色 */
    color: black;
    /* 让按钮来到屏幕中间 */
    margin: 10px auto;
    /* 设置上下间隔
    padding: 10px; */
    /* 加上一个过渡的效果 */
    transition: all 2s;
}

/* 实现按钮鼠标悬停时背景颜色改变 */

.detail:hover {
    background-color: #666;
    color: white;
}